TGML Target Area Element: <TargetArea>

TargetArea represents a clickable area in a graphic. Target area is not painted, that is, it is always invisible.

You do not have to use TargetArea to be able to handle mouse events. All of the graphical (painted) elements can be targets of mouse events. Use TargetArea when you need an invisible but clickable area.

Attribute	Type	Description
Height	Double	The height of the area. Inheritable: No Animatable: Yes
Length	Double	The x-coordinate of the area's upper left corner. Default: "0" Inheritable: No Animatable: Yes
Top	Double	The y-coordinate of the area's upper left corner. Default: "0" Inheritable: No Animatable: Yes
Width	Double	The width of the area. Inheritable: No Animatable: Yes

The TargetArea is used to create a "mouse sensitive" area that covers the whole Component.

Example:

Copy

<TGML>
    <Component Left="50.0" Top="50.0" Width="102" Height="102" ContentHeight="102" ContentWidth="102"> 
        <Script OnMouseOut="out" OnMouseOver="over"><![CDATA [ 

        function over(evt)
        {
            // Show blue edge
            var component = evt.getCurrentTarget();
            var rectangle = component.getChild("Hovering");
            rectangle.setAttribute("Visibility", "Visible");
        }

        function out(evt)
        {
            // Hide blue edge
            var component = evt.getCurrentTarget();
            var rectangle = component.getChild("Hovering");
            rectangle.setAttribute("Visibility", "Hidden");
        }
        ] ] ></Script>

        <Shapes .../>
            <Rectangle Name="Hovering" Visibility="Hidden" Left="1.0" Top="1.0" Width="100" Height="100" Fill="None" Stroke="#0000FF" />

        <TargetArea Left="0.0" Top="0.0" Width="102" Height="102"/> 
    </Component>
</TGML>

Without the TargetArea, the MouseOver and MouseOut events are sent every time the cursor passes the contained elements since the Script is defined at the Component level in this example. The TargetArea has the effect of "hiding" the contained shapes and you only get one MouseOver and one MouseOut when the cursor passes the Component.

Example of a TGML code fragment containing an invisible link area that can be placed above other shapes:

Copy

<TargetArea Left="50.0" Top="50.0" Width="100.0" Height="100.0"> 
    <Link Name="AnotherGraphics" />
</TargetArea>